<script setup lang="ts">
import { computed, ref } from "vue"
import CustomPassword from "./components/password.vue"
import CustomMobile from "./components/mobile.vue"

// 1. 标签切换的元数据
const tabMetas = [
  {
    title: "密码登录",
    subTitle: "验证码登录",
  },
  {
    title: "验证码登录",
    subTitle: "密码登录",
  },
]
// 2. 登录方式切换下标
const tabIndex = ref(0)

// 3. 切换登录方式
const changeTabIdnex = () => {
  // 0 -> 1
  // tabIndex.value = tabIndex.value === 0 ? 1 : 0;
  tabIndex.value = Math.abs(tabIndex.value - 1)
}

// 4. 通过计算属性，根据 下标，获取对应的登录方式
const acticeTabMeta = computed(() => tabMetas[tabIndex.value])
</script>
<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ acticeTabMeta.title }}</view>
      <view class="type">
        <text @click="changeTabIdnex()">{{ acticeTabMeta.subTitle }}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
    <CustomPassword v-if="tabIndex === 0" />
    <custom-mobile v-if="tabIndex === 1" />
  </view>
  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>
    <view class="social-account">
      <view class="icon">
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </view>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import "./index.scss";
</style>
